<script setup>
import { ref } from 'vue'

const name = ref("Hello Vue!")
const age = ref(18)
const hobby = ref("敲代码")
const major = ref("软件技术")
const sign = ref(`
  <h2>我的个人世界</h2>
  <a href="https://gitee.com/">点击进入我的Gitee</a>
  <p style="color: red">我是一个小小程序员，用代码改变世界。</p>
`)
</script>

<template>
  <div
    class="app-container"
    style="
      text-align: center;
      padding: 20px;
      width: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
      border-radius: 20px;
    "
  >
    <div style="display: flex; flex-direction: column">
      <span>姓名：{{ name }}</span>
      <span>年龄: {{ age }}</span>
      <span>兴趣爱好：{{ hobby }}</span>
      <span v-text="major"></span>
    </div>
    <div v-html="sign"></div>
  </div>
</template>

<style scoped>
.app-container {
  background-color: burlywood;
}
</style>